<template>
  <div class="anylysis">
    <!-- <div class="title">
      话题关键词：{{ state.keyWord }}
      <span @click="goAnalysis">查看分析&nbsp;></span>
    </div> -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="搜索关键词">
        <el-input v-model="state.search_info" placeholder="请输入关键词" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="state.tableData" :border="true" style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <el-row justify="space-around" :gutter="60">
            <el-col :span="12">
              <div style="padding-left: 10px">
                <p class="text_t" m="t-0 b-2">内容：</p>
                <div class="text">
                  {{ props.row.content }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="paddingleft: 10px">
                <p class="text_t" m="t-0 b-2">热门评论：</p>
                <div class="">
                  <div class="text">
                  {{ props.row.comment[0] }}
                </div>
                  <!-- <h2
                    style="lineheight: 50px; textalign: center"
                    v-if="formatImgUrl(props.row.pics).length === 0"
                  >
                    空
                  </h2> -->
                </div>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="发帖日期" prop="pub_date" />
      <el-table-column label="评论" prop="comment_count" />
    </el-table>
    <!-- <el-pagination
      v-model:current-page="state.curPageNum"
      v-model:page-size="state.perPageNum"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="state.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> -->
  </div>
</template>
<script setup>
import { Picture as IconPicture } from "@element-plus/icons-vue";
import { ref, computed, reactive, getCurrentInstance, onMounted } from "vue";
import {
  getWeiboAnalysis,
  getWeiboCount,
  getWeiboSearch,
  getWeiboTask,
  getWeiboPL,
} from "@/api";

import { useRouter } from "vue-router";
const router = useRouter();
const state = reactive({
  tableData: [],
  keyWord: "",
  curPageNum: 1,
  perPageNum: 10,
  total: 0,
  search_info: "",
});
const imgSrc = ref(
  "https://wx4.sinaimg.cn/thumb150/005YTux9gy1gmd95ybhqbj32c0340x6r.jpg"
);
const imgList = ref([
  imgSrc.value,
  imgSrc.value,
  imgSrc.value,
  imgSrc.value,
  imgSrc.value,
  imgSrc.value,
]);
onMounted(() => {
  getTable();
});
const getTable = () => {
  // getWeiboTask({
  //   curPageNum: state.curPageNum,
  //   perPageNum: state.perPageNum,
  //   search_info: state.search_info,
  // }).then((res) => {
  //   if (res.status == "200" && res.data) {
  //     state.tableData = res.data.data;
  //     state.total = res.data.total;
  //     state.keyWord = state.tableData[0].search_info;
  //     console.log(state.total, "1233445");
  //   }
  // });
  getWeiboPL().then((res) => {
    if (res && res.data) {
      state.tableData = res.data.data.filter(
        (item) =>
          item.comment_count > 50 &&
          item.content.indexOf(state.search_info) > -1
      );
      console.log(state.tableData, "123445");
    }
  });
};
const onSubmit = () => {
  getTable();
};
const exportExecl = () => {

};
const goAnalysis = () => {
  router.push({ name: `wbAnalysis`, query: { keyWord: state.keyWord } });
};
const formatImgUrl = (pics) => {
  if (pics) {
    let r = pics.split(",").filter((s) => s && s.trim());
    return r;
  } else {
    return [];
  }
};
const handleSizeChange = (v) => {
  state.perPageNum = v;
  getTable();
};
const handleCurrentChange = (v) => {
  state.curPageNum = v;
  getTable();
};

const getUser = () => {
  getAllUser().then((res) => {
    if (res.status == "200" && res.data) {
      state.tableData = res.data.data;
    }
  });
};
const handleClick = (v) => {
  deleteUser(v).then((res) => {
    getUser();
  });
};
</script>
<style lang='scss' scoped>
.anylysis {
  padding: 0 30px;
  // max-height: 80vh;
  // overflow: scroll;
  .demo-form-inline {
    margin-top: 20px;
    float: left;
  }
  .title {
    font-size: 30px;
    line-height: 50px;
    font-weight: 600;
    position: relative;
    span {
      font-size: 15px;
      color: #409eff;
      font-weight: normal;
      cursor: pointer;
      // float: right;
      // margin-right: 20px;
      // line-height: 30px;
      position: absolute;
      right: 5%;
      bottom: 0;
    }
  }
  .text_t {
    font-weight: 600;
    font-size: 15px;
    line-height: 25px;
    color: #409eff;
  }
  .text {
    padding: 0 10px;
  }
}
</style>
